<script setup>
import { useAppStore } from '@/store/modules'
import { ref, watch } from 'vue'

const props = defineProps({
  userInfo: Object
})

const userInfoObj = ref({})


function getIOS() {
  const systemInfo = uni.getSystemInfoSync();
  return systemInfo.platform === 'ios';
}




function toVIP() {
  uni.navigateTo({
    url: '/user-center/vip/index'
  })
}



watch(() => props.userInfo, (val) => {
  if (val) {
    userInfoObj.value = val
  }
}, { deep: true })
</script>

<template>
  <div class='userStatus_cop' :class="[userInfoObj.level > 0 ? 'vipBox' : 'unVipBox']" @click="toVIP" v-if="getIOS()">
    <div class="content">
      <img v-if="userInfoObj.level >= 1" src="@/assets/imgs/chaojiIcon.png" mode="widthFix" class="vipImg">
      <img v-else src="@/assets/imgs/vipimg.png" class="vipImg" alt="">
      <div class="center_box">
        <div class="label" :style="{ color: (userInfoObj.level > 0 ? '#F6C9A6' : '#9C643B') }">
          <span>{{ userInfoObj.level > 0 ? '尊享用户' : '普通用户' }}</span>
          <!-- <span>算力获取</span> -->
        </div>
        <!-- <div class="text"> {{ userInfoObj.level === 0 ? '升级解锁更多功能' : '已解锁更多权限' }}</div> -->
      </div>
      <div class="rightBtn" :class="[userInfoObj.level > 0 ? 'vipBtn' : 'unVipBtn']">
        立即查看
      </div>
    </div>
    <div class="footer_box" :style="{ color: (userInfoObj.level > 0 ? '#F6C9A6' : '#995C2D') }">
      <div v-if="userInfoObj.level > 0">尊享用户{{ userInfoObj.endTime?.slice(0, 10) }} 到期</div>
      <div v-else>开启无限创作，即刻体验专业级绘图与对话</div>
    </div>
  </div>
  <div class='userStatus_cop' :class="[userInfoObj.level > 0 ? 'vipBox' : 'unVipBox']" @click="toVIP" v-else>
    <div class="content">
      <img v-if="userInfoObj.level >= 1" src="@/assets/imgs/chaojiIcon.png" mode="widthFix" class="vipImg">
      <img v-else src="@/assets/imgs/vipimg.png" class="vipImg" alt="">
      <div class="center_box">
        <div class="label" :style="{ color: (userInfoObj.level > 0 ? '#F6C9A6' : '#9C643B') }">
          <span>{{ userInfoObj.levelName }}</span>
          <span>算力获取</span>
        </div>
        <div class="text"> {{ userInfoObj.level > 0 ? '已解锁更多权限' : '升级解锁更多功能' }}</div>
      </div>
      <div class="rightBtn" :class="[userInfoObj.level > 0 ? 'vipBtn' : 'unVipBtn']">
        {{ userInfoObj.level > 0 ? '立即购买' : '前往开通' }}
      </div>
    </div>
    <div class="footer_box" :style="{ color: (userInfoObj.level > 0 ? '#F6C9A6' : '#995C2D') }">
      <div v-if="userInfoObj.level > 0">{{ userInfoObj.levelName }} {{ userInfoObj.endTime?.slice(0, 10) }} 到期</div>
      <div v-else>开启无限创作，获取特权，即刻体验专业级绘图与对话</div>
    </div>
  </div>
</template>

<style lang='scss' scoped>
.userStatus_cop {
  box-sizing: border-box;
  position: relative;
  padding-bottom: 62rpx;
  height: 218rpx;
  background: linear-gradient(133deg, #F7E3CB 0%, #E4B080 100%);
  border-radius: 24rpx;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  margin-top: 24rpx;

  &.vipBox {
    background: linear-gradient(133deg, #5C4F42 0%, #423930 52%, #453B31 100%);
  }

  &.unVipBox {
    background: linear-gradient(133deg, #F7E3CB 0%, #E4B080 100%);
  }


  .content {
    box-sizing: border-box;
    flex: 1;
    display: flex;
    align-items: center;
    gap: 10rpx;
    padding: 0 18rpx 0 9rpx;

    .vipImg {
      flex-shrink: 0;
      width: 120rpx;
      height: 74.5rpx;
    }


    .center_box {
      flex: 1;

      .label {
        font-size: 42rpx;
        // color: #9C643B;
        font-weight: bold;
        display: flex;
        align-items: center;
        gap: 14rpx;
      }

      .text {
        margin-top: 7rpx;
        font-size: 26rpx;
        color: #A97E5B;
      }
    }

    .rightBtn {
      flex-shrink: 0;
      width: 146rpx;
      height: 58rpx;
      // background: linear-gradient(125deg, #B47540 0%, #975729 100%);
      border-radius: 33rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 24rpx;
      // color: #FFFFFF;

      &.vipBtn {
        background: linear-gradient(125deg, #EFDDB5 0%, #F6C9A7 100%);
        color: #2C2725;
      }

      &.unVipBtn {
        background: linear-gradient(125deg, #B47540 0%, #975729 100%);
        color: #FFFFFF;
      }
    }
  }

  .footer_box {
    box-sizing: border-box;
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 62rpx;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.2) 100%);
    border-radius: 0rpx 0rpx 24rpx 24rpx;
    padding-left: 20rpx;
    font-size: 24rpx;
    color: #995C2D;
    display: flex;
    align-items: center;
  }
}
</style>